<script setup name="ShangBaoHome">
import RiLi from "@/assets/images/rili.png";
import RenYuan from "@/assets/images/renyuan.png";
import XiaZai from "@/assets/images/xiazai.png";
import {useRouter, useRoute} from 'vue-router';

const router = useRouter()
const route = useRoute()
import useUserStore from '@/store/modules/user'
import {ElMessageBox} from "element-plus";

const userStore = useUserStore()
const userInfo = ref({});

function toShangBao() {

  router.push({
    path: '/shangBao',
  })
}

function toHistory(){
  router.push({
    path: '/dangKouHistory',
  })
}


function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/';
    })
  }).catch(() => { });
}

function changePwd() {
  console.log(userStore.id);
}


</script>

<template>
  <div class="page-body">

    <div class="msg">
      <div class="msg-icon"></div>
      <div class="person-info">
        <el-dropdown class="right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <el-button><el-text type="primary">{{ userStore.nickName }}</el-text></el-button>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/user/profile">
                <el-dropdown-item @click="changePwd">修改密码</el-dropdown-item>
              </router-link>
              <el-dropdown-item divided @click="logout">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="head">
      <div class="head-title">满足高校的精细化餐饮物流需求</div>
      <div class="head-caption">为不同高校提供专业的餐饮物流解决方案</div>
    </div>

    <el-row class="bus-btn-line">
      <el-col :span="7">
        <div class="bus-btn-item" @click="toShangBao">
          <div class="bus-img-div"><img class="bus-img" :src="RiLi"/></div>
          <div>需求上报</div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="bus-btn-item"  @click="toHistory">
          <div class="bus-img-div"><img class="bus-img" :src="RenYuan" /></div>
          <div>历史订单</div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="bus-btn-item">
          <div class="bus-img-div"><img class="bus-img" :src="XiaZai"/></div>
          <div>出库确认</div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<style scoped lang="scss">

$bg-color: #f6f4f4;

.page-body {
  background-color: $bg-color;
}

.msg {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row; // 主轴方向row横排 | row-reverse倒横排 | column竖排 | column-reverse倒竖排
  flex-wrap: nowrap; // 主轴换行方式：nowrap不换行 | wrap换行且第一行在上方 | wrap-reverse换行且第一行在下方
  justify-content: space-between; // 主轴上的对齐方式: flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐且项目之间的间隔都相等 | space-around每个项目两侧的间隔相等
  align-items: center; // 副轴对齐方式，flex-start起点对齐 | flex-end终点对齐 | center中点对齐 | baseline基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度
  .msg-icon {
    width: 30px;
    height: 30px;
    background-image: url('../assets/images/laba.png'); /* 确保路径正确 */
    background-size: cover;
    background-position: center;
  }

  .person-info {
    height: 30px;

    .popover-item {
      padding: 10px 5px;
    }
  }
}

.head {
  margin: 10px 3px;
  width: 100%;
  height: 100%;
  min-height: 150px;
  background-image: url('../assets/images/dangkou-bg.jpg'); /* 确保路径正确 */
  background-size: cover;
  background-position: center;
  padding-top: 40px;

  .head-title {
    color: white;
    font-size: 20px;
    text-align: center;
  }

  .head-caption {
    color: white;
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
  }
}


.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bus-btn-line {
  background-color: white;
  height: 300px;

  .bus-btn-item {
    border: 1px solid lightgray;
    text-align: center;
    margin: 20px;

    .bus-img-div {
      text-align: center;
      width: 100%;

      .bus-img {
        margin: 10px;
        background-color: $bg-color;
        border-radius: 10px;
        padding: 1px;
        width: 50px;
        height: 50px;
      }
    }
  }


}

</style>